/**
 * @Description:  * @Description: 模型监控管理
 * @Date: 2020-03-23 11:20:45
 */

 
$(function () {
    // 重置窗口大小
    function resizeWindow() {
        var DEBUG;
        //DEBUG = true;
        if (DEBUG) {
            [].forEach.call($($('*')), function (a) {
                a.style.outline = '1px solid #' + (~~(Math.random() * (1 << 24))).toString(16);
            });
        }
        console.log('resize...');
        var minHeight = $(window).height() - $('#userTable').offset().top - 10;
        $('#dataTreeDiv').css('max-height', minHeight);
    }
    resizeWindow();
    // resize窗口
    window.onresize = function () {
        resizeWindow();
    };

    function getList() {
        // alert('当前页面数据均为假数据')
        $.ajax({
            type: 'post',
            async: false,
            url: 'http://rest.apizza.net/mock/4b2127afb5657f4f96cf36d103057d12/getList',
            data: {},
            datatype: 'json',
            success: function (result) {
                console.log(result);
                if (result.code == 200) {
                    var html = '';
                    result.data.map(function (item, index) {
                        html += `
                        <tr align="center" progress="` + item.progress + `" canDownload="` + item.canDownload + `" canDig="` + item.canDig + `">
                            <td class="ellipsis" title="`+ item.modelName +`">` + item.modelName + `</td>
                            <td>` + item.topicName + `</td>
                            <td>` + item.initiator + `</td>
                            <td>
                                <div class="skillbar">
                                    <div class="filled` + (item.progress == 100 ? ` finish` : ``) + `" data-width="` + item.progress + `%" style="width: ` + item.progress + `%;">
                                    </div>
                                    <span class="percent">` + item.progress + `%</span>
                                </div>
                            </td>
                        </tr>
                        `;
                    });
                    $('#userTable').html(html);
                } else {
                    layui.layer.msg(result.msg, {
                        shade: 0.3,
                        time: 1000 // 1秒关闭
                    });
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
    getList();


    // 用户名 姓名 部门 职务
    // var data = {
    //     pageTotal: 10,
    //     pageAmount: 10,
    //     dataTotal: 100,
    //     curPage: 1
    // };
    // new Page({
    //     id: 'pagination',
    //     pageTotal: data.pageTotal, //必填,总页数（最少1页）
    //     pageAmount: data.pageAmount, //每页多少条
    //     dataTotal: data.dataTotal, //总共多少条数据（至少1条）
    //     curPage: data.curPage, //初始页码,不填默认为1
    //     pageSize: data.pageSize, //分页个数,不填默认为5
    //     showPageTotalFlag: true, //是否显示数据统计,不填默认不显示
    //     showSkipInputFlag: true, //是否支持跳转,不填默认不显示
    //     getPage: function (page) {
    //         //获取当前页数
    //         //console.log('当前是第' + page + '页');
    //         data.curPage = page;
    //         var start = (page - 1) * data.pageAmount + 1;
    //         var end = page * data.pageAmount;
    //         //console.log(start, end);
    //         // 请求数据
    //         check(pickChoice, start, end, function (result) {
    //             refreshTable(result.data);
    //         });
    //     }
    // });

    // 选中用户(要根据用户判断按钮权限)
    $('#userTable').on('click', 'tr', function (e) {
        var $currentTarget = $(e.currentTarget);
        console.log($currentTarget.attr('canDownload'));
        console.log($currentTarget.attr('canDig'));
        $('#downloadBtn,#showResult,#excavateBtn,#showDetailBtn').addClass('unable');
        if ($currentTarget.hasClass('curSelectedNode')) {
            $currentTarget.removeClass('curSelectedNode');
        } else {
            $('#userTable .curSelectedNode').removeClass('curSelectedNode');
            $currentTarget.addClass('curSelectedNode');

            if (JSON.parse($currentTarget.attr('canDownload'))) {
                $('#downloadBtn').removeClass('unable');
            }
            if (JSON.parse($currentTarget.attr('canDig'))) {
                $('#excavateBtn').removeClass('unable');
            }
            if ($currentTarget.attr('progress') == 100) {
                $('#showResult').removeClass('unable')
            }
            $('#showDetailBtn').removeClass('unable');
        }
    });

    // 点击查看详情
    $('#showDetailBtn').on('click', function () {
        var $this = $(this);
        if ($this.hasClass('unable')) {
            return;
        }
        var html = `
        <div id = "detailDiv">
            <table class="userTable" border="0" cellspacing="0" cellpadding="0">
                <tbody><tr class="head" id="tableTh" align="center">
                    <th>进程名称</th>
                    <th>进程进度</th>
                    <th>运行时间</th>
                    <th>状态</th>
                    <th>备注</th>
                </tr>
            </tbody></table>
            <div id="tableContentDiv">
                <table class="userTable" id="userTable" border="0" cellspacing="0" cellpadding="0">
                    <tbody><tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    <tr align="center">
                        <td>我是进程名称</td>
                        <td>我是进程进度</td>
                        <td>52:48:45</td>
                        <td>进行中</td>
                        <td>备注</td>
                    </tr>
                    
                </tbody></table>
                <div id="pagination" class="pagination" style="margin: 10px 20px"></div>
            </div>
        </div>`;
        var index = layer.open({
            type: 1,
            title: '{{模型名称}}运行情况',
            content: html,
            area: '900px',
            shadeClose: true, //点击遮罩关闭
        });
        //弹出即全屏
        // layer.full(index);
    });
});